<template>
  <div class="login-container">
    <!-- 顶部盒子 -->
    <div class="top-box">
      <!-- 导航栏 -->
      <van-nav-bar @click-left="pushBack">
        <template #left>
          <i class="iconfont iconbtn_nav_back"></i>
        </template>
      </van-nav-bar>
    </div>
    <!-- 主体区域 -->
    <div class="main-box">
      <!-- 标题 -->
      <h2>您好，请登录</h2>
      <!-- 表单 -->
      <van-form @submit="onSubmit" ref="loginForm">
        <!-- 手机号 -->
        <van-row>
          <van-col span="24">
            <van-field
              v-model="mobile"
              name="mobile"
              placeholder="请输入手机号"
              type="tel"
              :rules="[
                {
                  required: true,
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号格式不对'
                }
              ]"
            >
              <template #left-icon>
                <i class="iconfont iconbianzu1"></i>
              </template>
            </van-field>
          </van-col>
        </van-row>

        <!-- 验证码 -->
        <van-row>
          <van-col span="16">
            <van-field
              v-model="code"
              name="code"
              type="digit"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <template #left-icon>
                <i class="iconfont iconyanzhengma"></i>
              </template> </van-field
          ></van-col>
          <van-col @click="getCode" class="btn-col" span="8">
            <span class="code-btn van-hairline--left">{{ btnMessage }}</span>
          </van-col>
        </van-row>
        <!-- 用户协议 -->
        <p class="deal">
          登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
        </p>
        <div class="submit-box">
          <van-button round block type="danger" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 导入接口
import { getCode, login } from '../../api/api'
// 导入token 工具函数
import { setLocal } from '../../utils/local.js'
// map辅助函数
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      mobile: '18888881111',
      code: '',
      btnMessage: '获取验证码',
      delay: 0
    }
  },
  methods: {
    // 导入mutations
    ...mapMutations(['SETUSERINFO']),
    // 获取验证码
    getCode () {
      // 特殊处理
      if (this.delay > 0) {
        return
      }
      this.$toast.loading()
      // 表单校验
      this.$refs.loginForm.validate('mobile').then(res => {
        // 获取验证码
        getCode({
          mobile: this.mobile
        }).then(res => {
          this.$toast.success(res.data)
          // 设置倒计时时间
          this.delay = 60
          this.btnMessage = `${this.delay}S后重试`
          // 开启定时器

          this.interId = setInterval(() => {
            this.delay--
            this.btnMessage = `${this.delay}S后重试`
            if (this.delay <= 0) {
              clearInterval(this.interId)
              this.btnMessage = '获取验证码'
            }
          }, 1000)
        })
      })
    },
    // 返回
    pushBack () {
      const blackPaths = ['/my', '/info', '/question']
      // 获取返回的地址
      const { _redirect } = this.$route.query
      // 如果有就返回
      if (_redirect) {
        const isExist = blackPaths.some(v => {
          return _redirect.indexOf(v) === 0
        })
        if (!isExist) return this.$router.push(_redirect)
      }
      // 如果没有就会发现页
      return this.$router.push('/find')
    },
    // 提交数据
    onSubmit (values) {
      // 调用登录接口
      login(values)
        .then(res => {
          // console.log(res)
          // 提示
          this.$toast.success(res.message)
          // 保存数据 页面跳转
          setLocal(res.data.jwt)
          // 处理图片地址
          res.data.user.avatar = process.env.VUE_APP_URL + res.data.user.avatar
          // 保存用户信息
          this.SETUSERINFO(res.data.user)
          // 获取返回的地址
          const { _redirect } = this.$route.query
          if (_redirect) {
            return this.$router.push(_redirect)
          }
          // console.log(_redirect)
          // 跳转到用户中心
          this.$router.push('/my')
        })
        .catch(() => {
          this.$toast.fail('验证码错误,请重新输入')
          this.delay = 0
          clearInterval(this.interId)
          this.btnMessage = '获取验证码'
        })
    }
  }
}
</script>

<style lang="less">
.login-container {
  background-color: @bgColor;
  height: 100vh;
  .top-box {
    .van-nav-bar__left {
      padding-left: 0;
    }
    .iconbtn_nav_back {
      font-size: 44px;
    }
  }
  .main-box {
    padding: 0 15px;
    h2 {
      margin: 0;
      margin-top: 50px;
      margin-bottom: 63px;
      font-size: 18px;
      font-weight: 600;
    }
    .btn-col {
      height: 45px;
      display: flex;
      align-items: center;
    }
    .code-btn {
      display: inline-block;
      line-height: 29px;
      height: 29px;
      padding-left: 15px;
      font-size: 16px;
      color: #00b8d4;
    }
    .van-row {
      border-bottom: 1px solid #f7f4f5;
    }
    .deal {
      font-size: 12px;
      margin-top: 15px;
      span {
        color: #00b8d4;
      }
    }
    .submit-box {
      margin-top: 44px;
    }
  }
}
</style>
